<template style="background-color: rgb(246,246,246)" :key="appKey">
  <div class="el-row">
    <div class="el-col-16 el-col-offset-4 ">
      <div class="el-row grid-content bg-purple-dark card" style="background: rgb(40,158,255); ">
        <div style="height: 130px"></div>
      </div>
      <div class="el-row grid-content bg-purple-dark card">
        <div class="el-col-offset-1 img-card">
          <img :src="user.avatar_url" @click="upload_photo" alt="avatar">
        </div>
        <div class="el-col-15 el-col-offset-1">
          <h1 class="title">
            <span class="name">{{user.nickname}}</span>
            <span class="signature">{{user.signature}}</span>
          </h1>
          <div class="trans" id="tran">
            <div class="info" v-if="detail === false">
              <span class="iconfont infoIcon">&#xe8b7;</span><span class="infoItem">{{user.industry}}</span><br>
              <span class="iconfont infoIcon">&#xe9e9;</span><span class="infoItem">{{user.city}}</span><br>
            </div>
            <div class="detail" v-else>
              <span class="infoType">居住地</span><span class="infoItem">&nbsp;&nbsp;&nbsp;现居{{user.city}}市</span><br>
              <span class="infoType">所在行业</span><span class="infoItem">{{user.industry}}</span><br>
              <span class="infoType">教育经历</span><span class="iconfont infoIcon" style="color: rgb(152,0,66)">&#xe673;</span>
              <span class="infoItem">深圳大学</span><br>
            </div>
          </div>
          <div class="xiala">
            <div v-if="detail === false" class="shot" @click="changeDetail">
              <span class="iconfont infoIcon">&#xe6b9;</span><span class="tip">查看详细信息</span>
            </div>
            <div v-else class="shot" @click="changeDetail">
              <span class="iconfont infoIcon">&#xe609;</span><span class="tip">收起详细信息</span>
            </div>
            <el-button v-if="root===0" style="float:right;" type="primary" plain @click="gotolink">编辑个人资料</el-button>
            <el-button v-else-if="root===1" style="float:right;" type="primary" plain @click="get_Follow">关注他</el-button>
            <el-button v-else-if="root===3" style="float:right;" type="primary" plain @click="get_unFollow">取消关注</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-row style="margin-bottom: 20px">
    <div style="margin-top: 15px;width: 41.8%; margin-left: 16.6%;float: left">
      <div class="card">
        <div class="el-row">
          <div class="el-col-6" style="text-align: center">
            <el-button type="text" size="large" @click="gotoAnswer">回答&nbsp;{{user.answer_num}}</el-button>
          </div>
          <div class="el-col-6" style="text-align: center">
            <el-button type="text" size="large" @click="gotoCollect">收藏</el-button>
          </div>
          <div class="el-col-6" style="text-align: center">
            <el-button type="text" size="large" @click="gotoQuestion">提问</el-button>
          </div>
          <div class="el-col-6" style="text-align: center">
            <el-button type="text" size="large" @click="gotoFollow">关注</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="card" style="margin-top: 15px;width: 24%; margin-left: 15px;float: left">
      <p style="font-weight: bold">创作中心&nbsp;&nbsp;<span style="color: #4a8af4">Lv 1</span></p>
    </div>
    <router-view :key="$route.path"></router-view>
    <div class="card" style="height: 91px;margin-top: 15px; width: 24%; margin-left: 15px;float: left">
      <div class="el-row">
        <div class="el-col-12" style="border-right: 1px rgb(229,229,229) solid">
          <h4 style="color: rgb(133,144,189); font-weight: normal; text-align: center">关注了</h4>
          <h3 style="text-align: center;line-height: 0.5em">{{follow_num}}</h3>
        </div>
        <div class="el-col-12">
          <h4 style="color: rgb(133,144,189); font-weight: normal; text-align: center">关注者</h4>
          <h3 style="text-align: center;line-height: 0.5em">{{user.fans_num}}</h3>
        </div>
      </div>
    </div>
  </el-row>
</template>

<script>
import {checkIsFollowed, followUser, getFollowInfo, getUser, unFollowUser, uploadPhoto} from "@/network/user";
import {currentLoginData} from "@/assets/js/common";

export default {
  name: "UserInfo",
  components: {},
  watch: {
    $route: {
      handler() {
        this.get_user();
      },
      deep: true,
    }
  },
  data(){
    return{
      user: 0,
      userId: 0,
      detail: false,
      follow_num: 0,
      root: 0,
      user_id_now: 0,
      appKey: 1
    }
  },
  created() {
    this.get_user();
    //this.gotoAnswer();
    this.get_follow();
    this.get_LoginInfo();
  },
  methods: {
    get_user() {
      this.userId = this.$route.params["user_id"]
      getUser(this.userId).then((res)=>{
        this.user = res.data
      })
    },
    upload_photo() {
      uploadPhoto(this.userId).then()
    },
    get_follow() {
      this.userId = this.$route.params["user_id"]
      getFollowInfo(this.userId).then((res)=>{
        this.follow_num = res.data.length
      })
    },
    changeDetail() {
      if (this.detail){
        this.detail = !this.detail;
        document.getElementById("tran").style.height = "70px";
      }
      else {
        this.detail = !this.detail;
        document.getElementById("tran").style.height = "150px";
      }
    },
    gotolink() {
      this.$router.replace('/app/edit/'+this.userId);
    },
    gotoAnswer() {
      this.$router.replace('/app/user_info/'+this.userId+'/Answer')
    },
    gotoCollect() {
      this.$router.replace('/app/user_info/'+this.userId+'/Collect')
    },
    gotoQuestion() {
      this.$router.replace('/app/user_info/'+this.userId+'/Question')
    },
    gotoFollow() {
      this.$router.replace('/app/user_info/'+this.userId+'/Follow')
    },
    get_LoginInfo() {
      currentLoginData(loginData=> {
        if (loginData['isLogin']) {
          if (loginData['user_id'] !== this.userId){
            this.user_id_now = loginData['user_id']
            checkIsFollowed(this.user_id_now,this.userId).then((res)=>{
              console.log(res)
              if (res.data.isFollowed == 0)
                this.root = 1;
              else
                this.root = 3
            })
          }
        }
        else {
          this.root = 2;
        }
      })
    },
    get_Follow() {
      followUser(this.user_id_now,this.userId);
      this.root = 3;
    },
    get_unFollow() {
      unFollowUser(this.user_id_now,this.userId);
      this.root = 1;
    }
  }
}
</script>

<style scoped lang="scss">
$main-radius: 10px;
@mixin simple-shadow {
  box-shadow: 0 1px 5px rgba(27,31,35, .15), 0 0 1px rgba(106,106,106, .15);
}
.card{
  @include simple-shadow();
  p {
    text-align: center;
    line-height: 1em;
  }
}

.img-card {
  position: relative;
  top: -25px;
  background: #ffffff;
  border-radius: 10px;
  width: 208px;
  height: 208px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 200px;
    height: 200px;
    border-radius: 10px;
  }
}

.title {
  margin-bottom: 10px;
  display: flex;
  flex: 1 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  .name {
    font-size: 30px;
    font-weight: bolder;
  }
  .signature {
    margin-left: 30px;
    font-size: 18px;
    white-space: nowrap;
    line-height: 2.4;
    font-weight: lighter;
  }
}

.info {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  .infoIcon {
    padding-right: 15px;
  }
  .infoItem {
    line-height: 2.2;
  }
}

.detail {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  .infoType {
    width: 60px;
    font-size: 16px;
    margin-right: 35px;
    font-weight: 600;
    margin-bottom: 15px;
  }
  .infoIcon {
    padding-right: 15px;
  }
  .infoItem {
    font-size: 16px;
    line-height: 3;
    margin-bottom: 15px;
  }
}

.xiala {
  margin-top: 10px;
  display: inline;
  text-overflow: ellipsis;
  white-space: nowrap;
  .shot {
    display: inline-block;
    width: 30%;
    .infoIcon {
    padding-right: 15px;
    }
    .tip {
      line-height: 2.2;
      color: grey;
    }
    &:hover {
      cursor: pointer;
    }
  }

}

.trans {
  height:70px ;
  overflow: hidden;
  transition: height 500ms ease-out 0s;
}
</style>
